<template>
  <div class="app-container">
    <Navbar />
    <div style="background-color: #fff;">
      <ModuleNav />
      <div class="categoryBar">
        <slot name="categoryBar" />
      </div>
      <!-- 搜索项模块 -->
      <div v-if="$slots.searchModule" class="search-module module">
        <div class="operationBtn">
          <div></div>
          <div style="display: flex;justify-content: flex-end;">
            <!-- <div class="setBtn btn">
              <i class="el-icon-setting"></i>
            </div> -->
            <div class="packUp btn" @click="packUp">
              <i :class="searchStyle ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
              收起筛选
            </div>
          </div>
        </div>
        <div class="searchModule" :style="{
          ...searchStyle,
          transition: 'all 0.2s'
        }">
          <slot name="searchModule" />
        </div>
      </div>
      <!-- 操作按钮模块 -->
      <div v-if="$slots.operationModule" class="operation-module module">
        <slot name="operationModule" />
      </div>
      <!-- 内容模块 -->
      <div class="content-module module">
        <!-- 内容 -->
        <div v-if="$slots.contentModule" class="childModule">
          <slot name="contentModule" />
        </div>
        <!-- 底部 （ 分页 /...）-->
        <div v-if="$slots.footerModule" class="footerModule childModule">
          <slot name="footerModule" />
        </div>
      </div>
    </div>
    <slot name="dialog" />
  </div>
</template>

<script>

import { Navbar, ModuleNav } from '../../layout/components'
export default {

  components: {
    Navbar,
    ModuleNav
  },
  data () {
    return {
      searchStyle: null
    }
  },
  mounted () {
    this.getContentHeight()
    // ‘resize’监听页面窗口变化，窗口发生变化时重新计算内容区高度
    window.addEventListener('resize', this.debounce(this.getContentHeight, 500))
  },
  methods: {
    packUp () {
      if (this.searchStyle) {
        this.searchStyle = null
      } else {
        this.searchStyle = {
          height: 0,
          padding: 0,
          overflow: 'hidden'
        }
      }
      this.getContentHeight()
    },
    //防抖
    debounce (fn, delay) {
      let timer;
      return function () {
        if (timer) { clearTimeout(timer); }
        timer = setTimeout(() => { fn(); }, delay);
      }
    },
    //计算内容区的高度
    getContentHeight () {
      setTimeout(() => {
        const categoryBar = document.querySelector('.categoryBar')
        const searchModule = document.querySelector('.search-module')
        const operationModule = document.querySelector('.operation-module')
        const appMain = document.querySelector('.app-main')
        let cgHeight = categoryBar ? categoryBar.clientHeight : 0
        let smHeight = searchModule ? searchModule.clientHeight : 0
        let omHeight = operationModule ? operationModule.clientHeight : 0
        let appHeight = appMain ? appMain.clientHeight : 0

        const cHeight = appHeight - cgHeight - smHeight - omHeight - 120
        console.log('内容区高度', cHeight)
        //内容区高度 cHeight
        let contentModule = document.querySelector('.content-module')
        contentModule && (contentModule.style.height = cHeight + 'px')
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
  background: #f4f4f5;

  .module {
    background: #ffffff;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 6px;

    .searchModule {
      background-color: #e9f0f5;
      padding-top: 10px;
      border-radius: 6px;
    }

    .operationBtn {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .btn {
        font-size: 16px;
        color: #228ffb;
        border: 1px solid #228ffb;
        border-radius: 4px;
        margin-left: 10px;
        margin-bottom: 10px;
        padding: 5px 10px;
        cursor: pointer;
      }
    }

    .childModule {
      height: calc(100% - 40px);
      overflow: hidden;
      // margin-bottom: 10px;
    }

    .footerModule {
      height: 40px;
      margin-bottom: 0;
      text-align: right;
      display: flex;
      justify-content: flex-end;

      .el-pagination {
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }

  .operation-module {
    display: flex;
    justify-content: flex-end;
    padding: 10px 15px;
    box-sizing: border-box;
    background: #e9f0f5;
    margin: 0 15px;
    margin-top: 15px;
  }

  .search-module {
    padding: 15px;
    margin-bottom: 0;
    box-sizing: border-box;
    padding-bottom: 0;
  }

  .content-module {
    margin-bottom: 0;
    overflow: hidden;
    transition: all 0.5s;
  }
}
</style>
